define(function (require, exports, module) {

    var axios = require('lib/axios.js');
    axios.defaults.baseURL = baseSiteUrl;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    function GetUrlParamsMap() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }


    var VueComponent = new Vue({
        el: '#app',
        // mixins: [myMethod],
        data: {
            templateId: 0,
            templateFile: {
                id: 0,
                fullName: '',
                shortName: '',
                path: ''
            },
            templateRectangleList: [],
            curRectangleItem: {},
            CurRectangleIndex: 0,

            templateTextList: [],
            curTextItem: {},
            CurTextIndex: 0,

            templateImageList: [],
            curImageItem: {},
            CurImageIndex: 0
        },
        watch: {
            templateRectangleList: function (curVal, oldVal) {
                if (this.templateRectangleList != null && this.templateRectangleList.length > 0) {
                    this.curRectangleItem = this.templateRectangleList[this.CurRectangleIndex];
                }
            },
            templateTextList: function (curVal, oldVal) {
                if (this.templateTextList != null && this.templateTextList.length > 0) {
                    this.curTextItem = this.templateTextList[this.CurTextIndex];
                }
            },
            templateImageList: function (curVal, oldVal) {
                if (this.templateImageList != null && this.templateImageList.length > 0) {
                    this.curImageItem = this.templateImageList[this.CurImageIndex];
                }

            },
            CurRectangleIndex: function (curVal, oldVal) {
                if (this.templateRectangleList != null && this.templateRectangleList.length > 0) {
                    this.curRectangleItem = this.templateRectangleList[this.CurRectangleIndex];
                }
            },
            CurTextIndex: function (curVal, oldVal) {
                if (this.templateTextList != null && this.templateTextList.length > 0) {
                    this.curTextItem = this.templateTextList[this.CurTextIndex];
                }
            },
            CurImageIndex: function (curVal, oldVal) {
                if (this.templateImageList != null && this.templateImageList.length > 0) {
                    this.curImageItem = this.templateImageList[this.CurImageIndex];
                }
            }
        },
        created: function () {


            this.setCurTemplateId();


            this.rectangleRefresh();


        },
        methods: {

            rectangleRefresh: function () {

                var curVue = this;
                var url = "templateFile/TemplateConfig/"+this.templateId+".htmls";

                axios.get(url).then(function (response) {
                    console.log(response.data);
                    curVue.templateFile = response.data.templateFile;
                    curVue.templateRectangleList = response.data.templateRectangleList;
                    curVue.templateTextList = response.data.templateTextList;
                    curVue.templateImageList = response.data.templateImageList;

                    curVue.templateRectangleList.length > 0 && curVue.changeCurRectangleIndex(0);
                    curVue.templateTextList.length > 0 && curVue.changeCurTextIndex(0);
                    curVue.templateImageList.length > 0 && curVue.changeCurImageIndex(0);
                });
            },
            onSubmit: function () {

                var curVue = this;

                var curItem = this.curRectangleItem;//this.templateRectangleList[this.CurRectangleIndex];

                var url = baseSiteUrl+"templateFile/TemplateRectangleSave.htmls";

                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: curItem,
                    success: function (res) {
                        curVue.templateRectangleList[curVue.CurRectangleIndex] = res;
                        toastr.success('操作成功');
                    }
                })


            },
            onTextSubmit: function () {
                var curVue = this;

                var curItem =  this.curTextItem;// this.templateTextList[this.CurTextIndex];

                var url = baseSiteUrl+"templateFile/TemplateTextSave.htmls";

                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: curItem,
                    success: function (res) {
                        curVue.templateTextList[curVue.CurTextIndex] = res;
                        toastr.success('操作成功');
                    }
                })
            },

            onImageSubmit: function () {
                var curVue = this;

                var curItem = this.curImageItem;//this.templateImageList[this.CurImageIndex];

                var url = baseSiteUrl+"templateFile/TemplateImageSave.htmls";

                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: curItem,
                    success: function (res) {
                        curVue.templateImageList[curVue.CurImageIndex] = res;
                        toastr.success('操作成功');
                    }
                })
            },

            setCurTemplateId: function () {
                this.templateId = GetUrlParamsMap()['id'];
                //alert(this.templateId);
            },
            changeCurRectangleIndex: function (index) {
                this.CurRectangleIndex = index;
            },
            changeCurTextIndex: function (index) {
                this.CurTextIndex = index;
            },
            changeCurImageIndex: function (index) {
                this.CurImageIndex = index;
            },
            addRectangle: function () {
                this.templateRectangleList.push({
                    id: 0,
                    name: '新增名称',
                    tid: this.templateId,
                    positionX: 0,
                    positionY: 0,
                    width: 0,
                    height: 0,
                    rgbRed: 0,
                    rgbGreen: 0,
                    rgbBlue: 0,
                    pageNum: 1
                });
                this.changeCurRectangleIndex(this.templateRectangleList.length - 1);
            },
            addText: function () {
                this.templateTextList.push({
                    id: 0,
                    name: '新增名称',
                    tid: this.templateId,
                    positionX: 0,
                    positionY: 0,
                    width: 0,
                    height: 0,
                    rgbRed: 0,
                    rgbGreen: 0,
                    rgbBlue: 0,
                    fontSize: '12',
                    fontName: 'Helvetica',
                    fontEncoding: 'Cp1252',
                    pageNum: 1
                });
                this.changeCurTextIndex(this.templateTextList.length - 1);
            },
            addImage: function () {
                this.templateImageList.push({
                    id: 0,
                    name: '新增名称',
                    tid: this.templateId,
                    positionX: 0,
                    positionY: 0,
                    width: 0,
                    height: 0,
                    imgPath: '',
                    pageNum: 1
                });
                this.changeCurImageIndex(this.templateImageList.length - 1);
            },
            delRectangle: function () {
                var curVue = this;
                var curItem = this.templateRectangleList[this.CurRectangleIndex];
                var url = "templateFile/TemplateRectangleDel/{id}.htmls";
                url = url.replace("{id}", curItem.id);
                axios.get(url, curItem).then(function (response) {
                    curVue.templateRectangleList.splice(curVue.CurRectangleIndex, 1);
                    toastr.success('操作成功');
                }, function (response) {
                    toastr.error(response);
                });

            },

            delText: function () {
                toastr.success('删除文本');
                var curVue = this;
                var curItem = this.templateTextList[this.CurTextIndex];
                var url = "templateFile/TemplateTextDel/{id}.htmls";
                url = url.replace("{id}", curItem.id);
                axios.get(url, curItem).then(function (response) {
                    curVue.templateTextList.splice(curVue.CurTextIndex, 1);
                    toastr.success('操作成功');
                }, function (response) {
                    toastr.error(response);
                });

            },
            delImage: function () {
                var curVue = this;
                var curItem = this.templateImageList[this.CurImageIndex];
                var url = "templateFile/TemplateImageDel/{id}.htmls";
                url = url.replace("{id}", curItem.id);
                axios.get(url, curItem).then(function (response) {
                    curVue.templateImageList.splice(curVue.CurImageIndex, 1);
                    toastr.success('操作成功');
                }, function (response) {
                    toastr.error(response);
                });

            },

            onTemplateFileFormSubmit: function () {
                var curVue = this;
                var curItem = curVue.templateFile;
                var url = baseSiteUrl+"templateFile/TemplateFileSave.htmls";
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: curItem,
                    success: function (res) {
                        console.log(res);
                        toastr.success('操作成功');
                        curVue.templateFile = res; //保存后返回实体有主键哦
                    }
                })

            }
        }
    });

});